<template>
  <div class="user-profile">
    <h2>用户信息</h2>
    <div class="profile-content">
      <el-card>
        <div class="profile-info">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="profile-avatar">
                <el-avatar :size="100" icon="el-icon-user-solid" />
              </div>
            </el-col>
            <el-col :span="16">
              <div class="profile-details">
                <el-descriptions :column="1" border>
                  <el-descriptions-item label="用户名">{{ userInfo.username }}</el-descriptions-item>
                  <el-descriptions-item label="用户ID">{{ userInfo.id }}</el-descriptions-item>
                  <el-descriptions-item label="用户等级">{{ userInfo.level }}</el-descriptions-item>
                  <el-descriptions-item label="注册时间">{{ userInfo.registerTime }}</el-descriptions-item>
                  <el-descriptions-item label="最后登录">{{ userInfo.lastLoginTime }}</el-descriptions-item>
                </el-descriptions>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="profile-actions">
          <el-button type="primary" @click="editProfile">编辑信息</el-button>
          <el-button @click="changePassword">修改密码</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserProfile',
  data() {
    return {
      userInfo: {
        id: '12345678',
        username: 'TRACY',
        level: '注册用户',
        registerTime: '2015/10/10',
        lastLoginTime: '2015-09-28 18:19:47'
      }
    }
  },
  methods: {
    editProfile() {
      this.$message.info('编辑信息功能待实现')
    },
    changePassword() {
      this.$message.info('修改密码功能待实现')
    }
  },
  beforeUnmount() {
    // 清理可能的引用
    this.userInfo = null
  }
}
</script>

<style scoped>
.user-profile {
  padding: 20px;
}

.profile-content {
  margin-top: 20px;
}

.profile-avatar {
  text-align: center;
  padding: 20px 0;
}

.profile-details {
  padding: 20px 0;
}

.profile-actions {
  margin-top: 20px;
  text-align: center;
}

.profile-actions .el-button {
  margin: 0 10px;
}
</style>